<template>
  <div class="dashboard">
    <!-- Header -->
    <Header />

    <!-- Main Content -->
    <div class="content">
      <!-- Central Metrics -->
      <Center />

      <!-- Left Panels -->
      <div class="left-panel">
        <CenterLeft1 />
        <CenterLeft2 />
      </div>

      <!-- Right Panels -->
      <div class="right-panel">
        <CenterRight1 />
        <CenterRight2 />
      </div>
    </div>

    <!-- Bottom Panels -->
    <div class="bottom-panel">
      <BottomLeft />
      <BottomRight />
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';//引入头部组件
import Center from '@/components/center.vue';//趋势图组件
import CenterLeft1 from '@/components/centerLeft1.vue';//建议分类占比
import CenterLeft2 from '@/components/centerLeft2.vue';//社区动态公告
import CenterRight1 from '@/components/centerRight1.vue';//用户积分排行榜
import CenterRight2 from '@/components/centerRight2.vue';//积分来源
import BottomLeft from '@/components/bottomLeft.vue';//收入
import BottomRight from '@/components/bottomRight.vue';

export default {
  name: 'EchartsView',
  components: {
    Header,
    Center,
    CenterLeft1,
    CenterLeft2,
    CenterRight1,
    CenterRight2,
    BottomLeft,
    // BottomRight,
  },
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.content {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.left-panel, .right-panel {
  width: 48%;
}

.bottom-panel {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
